<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            margin: 0px;
        }
        #img1{
            width: 375px;
            height: 667px;
        }
        .return{
            width: 21px;
            height: 40px;
        }
        #img2{
            width: 250px;
            height: 100%;
        }
        header h1{
            letter-spacing:10px;
            color: white;
        }
        #img3,#img4,#img5{
            width: 50px;
            height: 53px;
        }
        #img6,#img7,#img8{
            width: 243px;
            height: 39px;
        }
        .register{
            width: 264px;
            height: 74px;
        }
        #username,#phone,#password{
            background-color:transparent;
            /*去掉文本框点击之后的边框*/
            outline: none;
            /*去掉文本框的边框*/
            border:0;
            font-size: 15px;
            color: #79B8F0;
        }
        input::-webkit-input-placeholder{
            color:#79B8F0;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#79B8F0;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#79B8F0;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
            color:#79B8F0;
        }
        .hint {
            color: red;
            font-size: 16px;
            position: absolute;
            left: 114px;
            top: 495px;
        }
    </style>
</head>
<body>
<header>
    <div style="position:relative;">
        <img id="img1" src="./img/register/img1.png" width="500" height="500" />
        <div style="position:absolute; left:60px; top:-100px;">
            <img id="img2"  src="./img/register/img2.png"/>
            <div style="position: absolute; left: 47px;top: 230px;" >
                <h1>健康饮水</h1>
            </div>
        </div>
        <div style="position: absolute;left:37px; top:332px;">
            <img id="img3" src="./img/register/img5.png">
        </div>
        <div style="position: absolute;left:37px; top:396px;">
            <img id="img4" src="./img/register/img3.png">
        </div>
        <div style="position: absolute;left:37px; top:461px;">
            <img id="img5" src="./img/register/img4.png">
        </div>
        <form method="post" action="">
            <div style="position: absolute;left:97px; top:335px;">
                <img id="img6" src="./img/register/img6.png">
                <div style="position: absolute;left:16px; top:3px;">
                    <input type="text" name="username" id="username" style="width: 180px;height: 30px" placeholder="请输入用户名" >
                </div>
            </div>
            <div style="position: absolute;left:97px; top:399px;">
                <img id="img7" src="./img/register/img6.png">
                <div style="position: absolute;left:16px; top:3px;">
                    <input type="text" name="phone" id="phone" style="width: 180px;height: 30px" placeholder="请输入账号(手机号)" >
                </div>
            </div>
            <div style="position: absolute;left:97px; top:464px;">
                <img id="img8" src="./img/register/img6.png">
                <div style="position: absolute;left:16px; top:3px;">
                    <input type="password" name="password" style="width: 180px;height: 30px" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div style="position: absolute;left:59px; top:564px;">
                <img class="register" onclick="register(event)" src="./img/register/register.png">
            </div>
            <div style="position: absolute;left:16px; top:15px;">
                <img class="return" onclick="history.go(-1)" src="./img/register/return.png">
            </div>
        </form>
    </div>
</header>
<script src="./api/app.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
    function doRegister(username,phone, password) {
        $.ajax( {
            url: url+'api/register.php',
            type: 'POST',
            dataType:"json",
            async:false,
            data: {
                username:username,
                phone:phone,
                password: password,
            },
            success: function (res){
                if(res.code==200){
                    // localStorage.setItem('name', res.data.name)
                    localStorage.setItem('username', res.data.username)
                    localStorage.setItem('phone',res.data.phone)
                    // localStorage.setItem('icon', res.data.icon)
                    // localStorage.setItem('type', res.data.type)
                    location.href = './login.html'

                }


                if(res.code<0){
                    showError(res.message)

                }
                console.log(res)
            },

            error : function (res) {
                console.log(res)
            }
        })

    }

    function register(e) {
        //  console.log(e)
        e.preventDefault();
        // //1. 获取用户名、密码
        var username = $('#username').val().trim();
        // var username = document.getElementById('username').value
        var phone = $('#phone').val().trim();
        var password = $('#password').val().trim();
        // console.log(username)

        //2. 验证格式
        var error_hint = '';
        var reg1 = /^[A-z]/
        var reg2 = /^[A-z]\S{2,9}$/
        if (!username) {
            error_hint = '请输入用户名!'
        }
        //3. 验证内容
        if (!error_hint) {
            error_hint = doRegister(username,phone, password)
        } else {
            showError(error_hint);
        }
    }
    function  showError(error_hint) {
        //4. 更新页面
        var form = document.getElementsByTagName('form')[0]
        var ele_old = document.getElementsByClassName('hint')[0]
        if (ele_old) {
            form.removeChild(ele_old)
        }

        if (error_hint) {
            var ele_hint = document.createElement('p')
            ele_hint.setAttribute('class', 'hint')
            ele_hint.innerText = error_hint
            // form.appendChild(ele_hint)
            // form.insertBefore(ele_hint, document.getElementsByName('submit')[0])
            form.appendChild(ele_hint)
        }
    }
</script>
</body>
</html>